// Example `tailwind.config.js` file
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    },
    width:{
      '0':'0',
      '0/0':'0%',
      '1/0':'10%',
      '2/0':'20%',
      '3/0':'30%',
      '4/0':'40%',
      '5/0':'50%',
      '6/0':'60%',
      '7/0':'70%',
      '8/0':'80%',
      '9/0':'90%',
      'full':'100%',
      'screen':'100vw',
    },
    minWidth: {
      '0': '0',
      '200':'200px',
      '1/4': '25%',
      '1/2': '50%',
      '3/4': '75%',
      'full': '100%',
    },
    minHeight: {
      '0': '0',
      '1/4': '25%',
      '1/2': '50%',
      '3/4': '75%',
      'full': '800px',
    },
  },
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  }
}
